<template>
	<div class="commodityEvaluate">
		<div class="productbar clearfix">
			<img src="" class="pro-img fl"/>
			<p class="pro-name fl">预售乐町2017秋装新款蕾丝镂空拼接白色...</p>
			<span class="pro-price fr">￥189</span>
		</div>
		<div class="evaluate-list">
			<div class="evaluate-item">
				<div class="headbar clearfix">
					<img src="" class="head-portrait fl"/>
					<p class="user-name fl">{{userName}}</p>
					<p class="evaluate-time fr">{{evaluateTime}}</p>
				</div>
				<div class="evaluate-text">{{evaluateText}}</div>
				<div class="evaluate-img clearfix">
					<img src="" class="fl"/>
					<img src="" class="fl"/>
					<img src="" class="fl"/>
				</div>
				<p class="color-cla">颜色分类：白色</p>
				<div class="merchant-reply"><p>商家回复：{{merchantReply}}</p></div>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue'
	export default {
		data () {return {
      evaluateContent:{},
			userName:'忘****川',
			evaluateTime:'2017年8月8日',
			evaluateText:'这真的是我买过最好看的一件衣服了，感谢搭搭秀让我买到这么好看的衣服，内心超级激动的啦~~~',
			merchantReply:'哦呵呵呵呵呵，亲爱的，您这就真的没见过世面了哟~咱家衣服可是整个魔仙堡最好的了呢，穿上就可以免费住进魔仙堡哟~'
		}},
		name: 'app',
    mounted:function () {
      this.$nextTick(function () {
        this.evaluateView();
      });
    },
		methods:{
      evaluateView:function () {
        var _this = this;
        this.$http.get(Util.ajaxPath.devProductUrl+"shop-mms/mms/goods/comments/001f7cc1b8a4/1").then(function (res) {
          _this.evaluateContent = res.body.content;
        });

      },
		}
	}
</script>
<style lang="scss">
.commodityEvaluate{
	background: #fff;
	.productbar{
		width: 100%; height: 1rem; background: #f4f5f5;
		.pro-img{display: block; width: 0.88rem; height: 0.88rem; margin: 0.06rem 0.28rem 0.06rem 0.3rem;}
		.pro-name{width:4.22rem; height: 1rem; font-size: 0.22rem; line-height: 1rem; color: #333; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
		.pro-price{display: block; height: 1rem; font-size: 0.22rem; line-height: 1rem; color: #ff365d; margin-right: 0.3rem;}
	}
	.evaluate-list{
		width:100%; background: #fff;
		.evaluate-item{
			margin: 0 0.3rem; width: calc(100%-0.6rem); border-bottom:1px solid #f1f1f1;
			.headbar{
				width: 100%; height: 1.18rem;
				.head-portrait{ display: block; width: 0.58rem; height: 0.58rem; margin: 0.3rem 0.2rem 0.3rem 0; border-radius: 50%;}
				.user-name{height: 1.18rem; font-size: 0.22rem; line-height: 1.18rem; color: #151517;}
				.evaluate-time{ height: 1.18rem; font-size: 0.22rem; line-height: 1.18rem; color: #999;}
			}
			.evaluate-text{width:100%; font-size: 0.24rem; line-height: 0.36rem; color: #151517;}
			.evaluate-img{
				padding:0.16rem 0 0.19rem 0; height:2.14rem;
				img{
					display: block; width: 2.14rem; height: 2.14rem;
					+img{ margin-left: 0.24rem;}
				}
			}
			.color-cla{height: 0.22rem; font-size: 0.22rem; text-align: left; line-height: 0.22rem; color: #999;}
			.merchant-reply{
				width: 100%; margin: 0.2rem 0 0.3rem 0; background:#f4f5f5;
				p{ padding: 0.24rem 0.3rem 0.24rem 0.3rem; font-size: 0.24rem; line-height: 0.36rem; color: #666;}
			}
		}
	}
}
</style>
